<template>
  <div>
    <nut-swiper
      :pagination-visible="true"
      pagination-color="#426543"
      auto-play="2000"
      height="140"
      id="swiper"
    >
      <nut-swiper-item v-for="(item,index) in bannersImg" :key="index">
            <img :src="item.pic" @click="swiperTarget(index)"/>
      </nut-swiper-item>
    </nut-swiper>
  </div>
</template>
<style>
#swiper {
  margin: 0 .3rem;
  border-radius: 0.2rem;
}
img {
  width: 100%;
}
</style>

<script>
import { getBanner } from '@/api/api'
export default {
  data() {
    return {
      bannersImg: [],
    };
  },
   async mounted() {
     let res = await getBanner();
     this.bannersImg = res.data.banners;
  },
  methods: {
      swiperTarget(index){
          window.location.href=this.bannersImg[index].url;
      }
  }
};
</script>